<template>
    <div class="card">
        <el-card shadow="hover" class="box-card input_style" v-loading="loading">
            <div style="margin-top: 50px; position: relative; text-align: center">
                <div class="progress_class">
                    <div class="text_class">{{ $i18n.t('FIRST_PUSH') }}</div>
                    <div style="font-size: 17px; text-align: center; font-weight: 500;">{{ firstPushTotal }}</div>
                </div>
                <el-progress type="circle" :percentage="100" :width="100" :show-text="false"></el-progress>
            </div>
            <div ref="firstPush" style="width:75%; height: 250px;"></div>
        </el-card>
        <el-card shadow="hover" class="box-card input_style" v-loading="loading">
            <div style="margin-top: 50px; position: relative">
                <div class="progress_class">
                    <div class="text_class">{{ $i18n.t('SECOND_PUSH') }}</div>
                    <div style="font-size: 17px; text-align: center; font-weight: 500">{{ secondPushTotal }}</div>
                </div>
                <el-progress type="circle" :percentage="100" :width="100" :show-text="false"></el-progress>
            </div>
            <div ref="secondPush" style="width:75%; height: 250px;"></div>
        </el-card>
        <el-card shadow="hover" class="box-card input_style">
            <div style="margin-top: 50px; position: relative">
                <div class="progress_class">
                    <div class="text_class">{{ $i18n.t('RISK_APPROVE_PASS_RATE') }}</div>
                    <div style="font-size: 17px; text-align: center; font-weight: 500">{{ riskPassRateTotal }}%</div>
                </div>
                <el-progress type="circle" :percentage="riskPassRateTotal" :width="100" :show-text="false"></el-progress>
            </div>
            <div ref="riskPassRate" style="width:75%; height: 250px;"></div>
        </el-card>
    </div>
</template>

<script>
    import ECharts from 'echarts/lib/echarts'

    export default {
        name: 'inoutOverview',
        props: {
            loading: { type: Boolean, required: true },
            firstPush: { type: Object, required: true },
            secondPush: { type: Object, required: true },
            riskPassRate: { type: Object, required: true }
        },
        watch: {
            firstPush: {
                handler: function (newVal) {
                    const channel = []
                    const oldUser = []
                    const newUser = []
                    newVal.data.forEach(item => {
                        channel.push(item.channel)
                        oldUser.push(item.old)
                        newUser.push(item.new)
                    })
                    // 新用户图表
                    const charts = ECharts.init(this.$refs.firstPush)
                    charts.setOption({
                        color: ['#108EE9', '#86CF68'],
                        legend: {},
                        // 标注位置
                        tooltip: {
                            trigger: 'axis'
                        },
                        // 提示线
                        grid: {
                            left: 100
                        },
                        yAxis: {
                            // y轴的设置
                            type: 'category', // 不连续的字符串
                            data: channel
                        },
                        xAxis: {
                            // x轴的设置
                            splitLine: { show: false } // 去除网格线
                        },
                        series: [
                            {
                                name: this.$t('NEW'),
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            // 让数据为0时不显示
                                            formatter: (val) => {
                                                if (val.value !== 0) {
                                                    return val.value
                                                } else {
                                                    return ''
                                                }
                                            }
                                        }
                                    }
                                },
                                data: newUser
                            },
                            {
                                name: this.$t('OLD'),
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            // 让数据为0时不显示
                                            formatter: function (val) {
                                                if (val.value !== 0) {
                                                    return val.value
                                                } else {
                                                    return ''
                                                }
                                            }
                                        }
                                    }
                                },
                                data: oldUser
                            }
                        ]
                    })
                },
                deep: true
            },
            secondPush: {
                handler: function (newVal) {
                    const channel = []
                    const oldUser = []
                    const newUser = []
                    newVal.data.forEach(item => {
                        channel.push(item.channel)
                        oldUser.push(item.old)
                        newUser.push(item.new)
                    })
                    // 新用户图表
                    const charts = ECharts.init(this.$refs.secondPush)
                    charts.setOption({
                        color: ['#108EE9', '#86CF68'],
                        legend: {},
                        // 标注位置
                        tooltip: {
                            trigger: 'axis'
                        },
                        // 提示线
                        grid: {
                            left: 100
                        },
                        yAxis: {
                            // y轴的设置
                            type: 'category', // 不连续的字符串
                            data: channel
                        },
                        xAxis: {
                            // x轴的设置
                            splitLine: { show: false } // 去除网格线
                        },
                        series: [
                            {
                                name: this.$t('NEW'),
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            // 让数据为0时不显示
                                            formatter: (val) => {
                                                if (val.value !== 0) {
                                                    return val.value
                                                } else {
                                                    return ''
                                                }
                                            }
                                        }
                                    }
                                },
                                data: newUser
                            },
                            {
                                name: this.$t('OLD'),
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            // 让数据为0时不显示
                                            formatter: function (val) {
                                                if (val.value !== 0) {
                                                    return val.value
                                                } else {
                                                    return ''
                                                }
                                            }
                                        }
                                    }
                                },
                                data: oldUser
                            }
                        ]
                    })
                },
                deep: true
            },
            riskPassRate: {
                handler: function (newVal) {
                    const channel = []
                    const oldUser = []
                    const newUser = []
                    newVal.data.forEach(item => {
                        channel.push(item.channel)
                        oldUser.push(item.old)
                        newUser.push(item.new)
                    })
                    // 新用户图表
                    const charts = ECharts.init(this.$refs.riskPassRate)
                    charts.setOption({
                        color: ['#108EE9', '#86CF68'],
                        legend: {
                        },
                        // 标注位置
                        tooltip: {
                            // 设置百分号
                            trigger: 'axis',
                            formatter: '{b0}<br/>{a0}: {c0}%<br/>{a1}: {c1}%'
                        },
                        // 提示线
                        grid: {
                            left: 100
                        },
                        yAxis: {
                            // y轴的设置
                            type: 'category', // 不连续的字符串
                            data: channel
                        },
                        xAxis: {
                            // x轴的设置
                            splitLine: { show: false }, // 去除网格线
                            axisLabel: {
                                formatter: function (val) {
                                    return val + '%'
                                }
                            }
                        },
                        series: [
                            // 每个形状的设置
                            {
                                name: this.$t('NEW'),
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            // 添加百分号,让数据为0时不显示
                                            formatter: (val) => {
                                                if (val.value !== 0) {
                                                    return val.value + '%'
                                                } else {
                                                    return ''
                                                }
                                            }
                                        }
                                    }
                                },
                                data: newUser
                            },
                            {
                                name: this.$t('OLD'),
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            // 添加百分号，让数据为0时不显示
                                            formatter: function (val) {
                                                if (val.value !== 0) {
                                                    return val.value + '%'
                                                } else {
                                                    return ''
                                                }
                                            }
                                        }
                                    }
                                },
                                data: oldUser
                            }
                        ]
                    })
                },
                deep: true
            }
        },
        computed: {
            firstPushTotal () {
                return this.firstPush.total
            },
            secondPushTotal () {
                return this.secondPush.total
            },
            riskPassRateTotal () {
                return this.riskPassRate.total
            }
        }
    }
</script>

<style scoped lang="less">
    .card{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-bottom: 20px;
    }
    .box-card{
        width: 33%;
        height: 260px;
    }
    .input_style{
        div{
            float: left;
        }
    }
    .progress_class{
        z-index: 100;
        text-align: center;
        position:absolute;
        padding-top: 25px;
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        .text_class{
            width: 70px;
            font-size: 12px;
            text-align: center;
        }
    }
</style>
